<!--
    * Time    : 2020-12-25 13:57:13
    * Author  : zhangTj
    * Desc    : 自提核销二维码Dialog(在订单列表和订单详情页面中使用)
-->

<template>
    <div>
        <!-- 提货凭证dialog -->
        <van-dialog v-if="proofShow" v-model="proofShow" close-on-click-overlay :showCancelButton="false" :showConfirmButton="false">
            <div class="text-center font-16 border-bottom py-1">
                <span>提货凭证</span>
            </div>
            <div class="p-2">
                <div class="text-center mb-1 d-flex flex-column a-center">
                    <div ref="qrcode" style="width: 150px; height: 150px">
                        <img :src="qrCodeImg" alt="" />
                    </div>
                    <div class="font-14 letter-sp5 my-1">提货码</div>
                    <div class="mt font-20 font-weight letter-sp10">
                        <span class="border p bg-f8">{{ sinceMentionData.sinceMentionCode }}</span>
                    </div>
                </div>
                <div class="font-14 mt-2">
                    <div class="d-flex mb-1">
                        <span class="mr-1 text-666" style="width: 75px">提货手机:</span>
                        <span class="flex-1">{{ sinceMentionData.userContactPhone }}</span>
                    </div>
                    <div class="d-flex mb-1">
                        <span class="mr-1 text-666" style="width: 75px">自提点:</span>
                        <span class="flex-1">{{ sinceMentionData.pointName }}</span>
                    </div>
                    <div class="d-flex mb-1">
                        <span class="mr-1 text-666" style="width: 75px">提货地址:</span>
                        <span class="flex-1">{{ sinceMentionData.sinceMentionDetailAddr }}</span>
                    </div>
                </div>
                <div class="text-center mt-2">
                    <div class="p-1 border border-danger w-100 text-danger">长按二维码保存</div>
                </div>
            </div>
        </van-dialog>
    </div>
</template>

<script>
import { sinceMentionVoucher } from 'api/order'
import QRCode from 'qrcode'

export default {
    name: '',
    props: {
        value: Boolean,
        subNumber: {
            type: [String, Number],
            required: true
        },
        // 是否重新刷新dialog数据
        refresh: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            proofShow: false,
            codeImg: false, // 是否以生成二维码
            sinceMentionData: '', // 提货凭证数据
            qrCodeImg: '' // 二维码图片
        }
    },
    computed: {},
    watch: {
        value: {
            handler(newValue) {
                this.proofShow = newValue
            },
            immediate: true
        },
        proofShow(val) {
            if (val) {
                if (!this.sinceMentionData || this.refresh) {
                    sinceMentionVoucher(this.subNumber).then((res) => {
                        this.sinceMentionData = res.result
                        QRCode.toDataURL(this.sinceMentionData.sinceMentionQRCode, {
                            width: 150,
                            height: 150
                        })
                            .then((res) => {
                                this.qrCodeImg = res
                                this.codeImg = true
                            })
                            .catch((err) => {
                                this.codeImg = false
                            })
                    })
                }
            }
            this.$emit('input', val)
        }
    }
}
</script>

<style lang="scss" scoped></style>
